<template>
  <el-card class="order-history">
    <h2>订单历史</h2>
    <el-form :inline="true" class="search-form">
      <el-form-item label="用户ID">
        <el-input v-model="userId" placeholder="输入用户ID" style="width: 200px;" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchBuy">查询购买订单</el-button>
        <el-button type="success" @click="fetchSell">查询销售订单</el-button>
      </el-form-item>
    </el-form>
    <h3>购买订单</h3>
    <el-table :data="buyOrders" style="width: 100%;">
      <el-table-column prop="id" label="订单ID" width="100" />
      <el-table-column prop="user_card_id" label="商品ID" width="120" />
      <el-table-column prop="quantity" label="数量" width="100" />
      <el-table-column prop="total_price" label="总价" width="120" />
      <el-table-column prop="status" label="状态" width="100" />
    </el-table>
    <h3>销售订单</h3>
    <el-table :data="sellOrders" style="width: 100%;">
      <el-table-column prop="id" label="订单ID" width="100" />
      <el-table-column prop="user_card_id" label="商品ID" width="120" />
      <el-table-column prop="quantity" label="数量" width="100" />
      <el-table-column prop="total_price" label="总价" width="120" />
      <el-table-column prop="status" label="状态" width="100" />
    </el-table>
    <el-alert v-if="msg" :title="msg" type="info" show-icon class="msg-alert" />
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const userId = ref('')
const buyOrders = ref([])
const sellOrders = ref([])
const msg = ref('')

const fetchBuy = async () => {
  try {
    const res = await axios.get(`/order/history/buy/${userId.value}`)
    buyOrders.value = res.data
    msg.value = ''
  } catch (e) {
    msg.value = e.response?.data?.detail || '查询失败'
    ElMessage.error(msg.value)
  }
}
const fetchSell = async () => {
  try {
    const res = await axios.get(`/order/history/sell/${userId.value}`)
    sellOrders.value = res.data
    msg.value = ''
  } catch (e) {
    msg.value = e.response?.data?.detail || '查询失败'
    ElMessage.error(msg.value)
  }
}
</script>

<style scoped>
.order-history {
  max-width: 900px;
  margin: 40px auto;
  padding: 32px 24px;
  border-radius: 12px;
  background: #f8f9fa;
}
.search-form {
  margin-bottom: 16px;
}
.msg-alert {
  margin-top: 16px;
}
</style> 